<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/include.inc.jsp" %>
<!DOCTYPE html>

<html>
<head>
    <%@include file="/WEB-INF/views/layout/miiteen/base.ref.jsp" %>
    <style>
        .file-uploads {
            overflow: hidden;
            position: relative;
            text-align: center;
            display: inline-block;
            background-color: #fbfdff;
            border: 1px dashed #c0ccda;
            border-radius: 6px;
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            line-height: 100px;
        }

        .edit .el-form .el-form-item__content {
            max-width: 220px;
            position: relative;
        }

        .imgbox {
            display: inline-block;
            position: absolute;
            top: 0;
            margin-left: 160px;
            background-color: #fbfdff;
            border: 1px dashed #c0ccda;
            border-radius: 6px;
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            line-height: 100px;
        }

        .imgbox:hover:after {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            content: attr(data-text);
            transition: all 1s ease;
            transform: translateY(0);
            color: #FFF;
        }

        .imgbox img {
            width: 100%;
            height: 100%;
        }

        .file-uploads:hover, .file-uploads:focus {
            border-color: #409EFF;
            color: #409EFF;
        }

        .item-action {
            position: absolute;
            z-index: 99;
            display: inline-block;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }

        .item-action i {
            display: none;

        }

        .imgbox:hover i {
            display: inline-block;
            color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<div class="mainpage edit">
    <!--顶部菜单-->
    <div class="page-topmenu">
        <div class="btn-panel">
            <el-button type="primary" size="small" icon="el-icon-check" @click="save">保存</el-button>
        </div>
        <div class="btn-panel">
            <el-button size="small" icon="el-icon-back" @click="back">返回</el-button>
        </div>
    </div>
    <!--编辑表单-->
    <el-form :ref="formid" :model="form" :rules="rules" size="small" :label-width="labelwidth"
             :label-position="labelposition"
             class="one-col" :validate-on-rule-change="false">

        <!--视业务进行更改-begin-->
        <input type="hidden" v-model="form.id"/>
        <el-form-item label="名称" prop="name" >
            <el-input v-model="form.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="deptName" >
            <el-input v-model="form.deptName" placeholder="部门" @focus="selectDept"></el-input>
        </el-form-item>
        <el-form-item label="上传类型" prop="ylzd2">
            <el-select v-model="form.ylzd2" placeholder="上传类型">
                <el-option
                        v-for="item in ylzd2List"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark" >
            <el-input v-model="form.remark" placeholder="备注" ></el-input>
        </el-form-item>
    </el-form>
    </div>
    <script>
        //初始化数据，必须放置在列表页面封装部分前
        function initVueOption(obj) {
            //设置控制器
            obj.data.controller = "${ctx}/ct/ctdatatype";
            //设置表单数据
            obj.data.form = ${cTDataType};
            //设置校验规则，没有则删掉
            //服务类型
            obj.data.ylzd2List = [{
                value: 0,
                label: '普通上传'
            }, {
                value: 1,
                label: '资料上传'
            }]

            obj.data.rules = {
                deptName:[{
                    required:true,
                    message:'请选择部门',
                }],
                name:[{
                    required:true,
                    message:'请输入类型名称',
                }],

            }

            //选择部门
            obj.methods.selectDept = function () {
                miiteen.customsearch.open("sysDepartment", function (result) {
                    var param = result[0];
                    Page.form.deptId = param.result1;
                    Page.form.deptName = param.result2;
                    console.log();
                }, {
                    title: "部门选择",
                    type: "tree",
                    multiple: false,
                    con: {deptIds: "${deptIds}"}
                })
            }

        }
    </script>
<!--编辑页面封装部分-->
<%@include file="/WEB-INF/views/layout/miiteen/page.edit.ref.jsp" %>
</body>
</html>
